// webpack配置文件

//1.引入的模块
let path = require('path');
const glob = require("glob") // node内置glob模块 主要用于解析路径
    //引入htmlwebpackplugins插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin') // 提取css
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin'); // 压缩css

/* 自动加载所有页面JS作为入口 */
//定义一个js模块对象
let entry = {}
    //获取所有模块的js文件路径----找到所有页面目录中的js文件
let entryJs = glob.sync('./src/pages/*/*.js');
//遍历数组--拼接entry键值对
entryJs.map(v => {
    let chunksName = path.basename(v, '.js'); //把文件名 后缀.js去掉  ad.js===>ad
    //拼接  
    entry[chunksName] = v;
})


/* 自动打包所有页面 */
//定义一个所有页面的数组
let pageArr = [];
//获取所有pages中的html
let pageHtml = glob.sync('./src/pages/*/*.html');
//遍历拼接每一个页面 插件
pageHtml.forEach(v => {
    //处理数据
    //把拼接好的html 放到数组中
    pageArr.push(new HtmlWebpackPlugin({
        template: v, //开发页面模板
        filename: path.basename(v), //输出到dist中的名字
        chunks: [path.basename(v, '.html')] //配置当前页所需要的模块 
    }))
})

//2.暴露5大核心
module.exports = {
    //1.entry
    // entry: './src/index.js',//单入口

    //老做法-多入口----配置所有页面中需要使用的模块(一个js文件就是一个模块)
    //语法:  key:value   此处的key 相当于模块名  value就是指定模块的地址

    entry,
    //2.output
    output: {
        path: path.resolve(__dirname, 'dist'), //设置输出目录 
        filename: 'js/[name]-[hash:16].js', //输出的静态文件名
        publicPath: './',
    },
    //3.loader
    module: {
        //规则
        rules: [
            //处理css
            {
                test: /\.css$/,
                use: [{
                    loader: MiniCssExtractPlugin.loader, // 提取css
                    options: {
                        publicPath: '../' // 资源查找路径
                    }
                }, 'css-loader']
            },
            //处理less
            {
                test: /\.less$/, // 匹配所有.less文件
                use: [{
                        loader: MiniCssExtractPlugin.loader, // 提取css
                        options: {
                            publicPath: '../' // 资源查找路径
                        }
                    }, // 创建style标签 把css插入html的head内
                    'css-loader', // 解析加载css到js中（把css打成字符串）。
                    'less-loader', // 编译less为css
                ]
            },
            //处理css中的img
            {
                test: /\.(jpg|png|gif)$/,
                loader: 'url-loader', //使用哪个加载器
                options: { //配置加载器其它规则
                    name: '[hash:10].[ext]', // 图片输出的名字hash长度16位 默认32位
                    limit: 10 * 1024, // 限制图像大小 小于10kb base64处理 如大于10kb,不处理 
                    // 关闭url-loader的es Module  使用commonjs module解析 , url-loader默认使用es6模块化解析 而后续使用 html-loader 引入图片是 commonjs解析  不关闭会报错
                    esModule: false,
                    outputPath: 'img' // 图片输出文件夹        
                }
            },
            //处理html中的img
            {
                test: /\.html$/, // 处理html中引入img
                loader: 'html-loader'
            },
            //处理字体图标
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/, // 处理字体格式文件
                loader: 'file-loader',
                options: {
                    name: '[hash:16].[ext]', // 输出名字
                    outputPath: 'fonts' // 输出路径（输出到文件夹fonts中）
                }
            },
            //ES6转ES5 
            {
                test: /\.js$/,
                loader: 'babel-loader', // loader 编译es6为es5
                exclude: /node_modules/ // 排除 node_modules
            }

        ]
    },
    //4.plugins
    plugins: [
        // 打包html
        //语法:  new 插件名({是一个对象,表示配置插件的选项})
        // 提取css，把css中打包的js中提取出来成为独立文件
        new MiniCssExtractPlugin({ // 提取css
            filename: 'css/[name].css' // 输出到css文件夹里
        }),

        new OptimizeCssAssetsWebpackPlugin() // 压缩css
    ].concat(pageArr),

    //5.mode
    mode: process.env.NODE_ENV,

    //6.开发服务器
    devServer: {
        contentBase: path.resolve(__dirname, 'dist'), // 启动服务器目录
        compress: true, // 启动gzip
        port: 8848, // 端口 具有唯一性,同一个端口号,不能多次启动,不能使用常用端口: 5500 80 8080  3306  3000  设置时不推荐使用1000以内数字 
        open: true, // 自动打开服务
        publicPath: '/', // 静态资源查找路径
        openPage: 'ad.html', // 默认打开的页面
    },
    target: 'web', // 目标是浏览器
}